<div class="title-big">{{ text.user?.welcome(userModule.state.userID ) }}</div>

<div style="padding: 20px 0">
  <div class="select-container">
    <span>
      {{ text.layout?.langSelect }}
    </span>
    <nz-select [(ngModel)]="layoutModule.lang">
      <ng-container *ngFor="let item of langs">
        <nz-option [nzValue]="item.value" [nzLabel]="item.label()"></nz-option>
      </ng-container>    
    </nz-select>
  </div>
  <div class="select-container">
    <span>
      {{ text.layout?.themeSelect }}
    </span>
    <nz-select [(ngModel)]="layoutModule.siderTheme">
      <ng-container *ngFor="let item of themes">
        <nz-option [nzValue]="item.value" [nzLabel]="item.label()"></nz-option>
      </ng-container>    
    </nz-select>
  </div>

</div>

<div style="width: 500px;background: #fff;float: left; padding: 30px 20px;" *ngFor="let list of text.layout?.shortcutKeyList">
  <nz-list nzBordered [nzHeader]="list.title">
    <nz-list-item *ngFor="let item of list.items">
      <span nz-typography><mark>{{ item.key }}</mark></span>
      {{ item.describe }}
    </nz-list-item>
  </nz-list>
</div>
